<template>
	<view class="courseList">
		<view class="container">
			<view class="calendarBox">
				<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="true" @change="change"
					@monthSwitch="monthSwitch" />
			</view>
			<view class="list" v-if="courseList">
				<view class="cont" v-for="(item,i) in courseList" :key="i">
					<view class="top">
						<view class="type">{{item.type == 1 ? '团' : '私'}}</view>
						<view class="time">{{item.time}}</view>
						<view class="amount" v-if="item.type == 1"><text>{{item.reservation}}</text>/{{item.count}}人</view>
					</view>
					<view class="bottom">
						<image :src="item.imgUrl"></image>
						<view class="name">{{item.name}}</view>
						<view class="line"></view>
						<view class="courseName">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCoursePaike,
		getCoursePaikeStatus
	} from "@/api/getData.js";

	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				info: {
					selected: [{
							date: "2023-04-24",
						},
						{
							date: "2023-04-25",
						},
						{
							date: "2023-04-26",
						}
					]
				},
				courseList: [],
				currentTime: null,
				year: null,
				month: null
			}
		},
		onLoad() {
			console.log(this.info)
			const dd = new Date()
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			this.year = y
			this.month = m
			this.getCoursePaikeStatus()
		},
		methods: {
			async getCoursePaikeStatus() {
				const data = {
					storeId: 3,
					year: this.year,
					month: this.month
				}
				const {
					data: res
				} = await getCoursePaikeStatus(data)
				this.info.selected = res.data
			},
			async getCoursePaike() {
				const data = {
					storeId: 3,
					currentTime: this.currentTime
				}
				const {
					data: res
				} = await getCoursePaike(data)
				this.courseList = res.data
			},
			change(e) {
				console.log('change 返回:', e)
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// })
				if (e.extraInfo.date) {
					this.currentTime = e.extraInfo.date
					this.getCoursePaike()
					// this.courseList = [{
					// 	type: 1,
					// 	time: '13:00-13:20',
					// 	total: 10,
					// 	current: 5,
					// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					// 	name: '王教练',
					// 	courseName: '私教体验课'
					// }, {
					// 	type: 2,
					// 	time: '13:00-13:20',
					// 	total: 10,
					// 	current: 5,
					// 	imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
					// 	name: '王教练',
					// 	courseName: '私教体验课'
					// }]
				} else {
					this.courseList = []
				}
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
				this.year = e.year
				this.month = e.month
				this.getCoursePaikeStatus()
			}
		}
	}
</script>

<style lang="less">
	.uni-calendar__backtoday{
		display: none !important;
	}
	.courseList {
		.container {
			margin: 32rpx;

			.calendarBox {
				border-radius: 16rpx;
				overflow: hidden;
			}

			.list {
				.cont {
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 32rpx;
					margin-top: 32rpx;

					.top {
						display: flex;
						margin-bottom: 22rpx;
						align-items: center;

						.type {
							width: 32rpx;
							height: 32rpx;
							background: linear-gradient(-16deg, #FFC97C, #F3863C);
							border-radius: 8rpx;
							margin-right: 17rpx;
							font-size: 22rpx;
							color: #FFFFFF;
							line-height: 32rpx;
							text-align: center;
						}

						.time {
							font-size: 32rpx;
							font-weight: 600;
							color: #E60012;
						}

						.amount {
							font-size: 24rpx;
							color: #A4A4A4;
							margin-left: auto;

							text {
								font-size: 32rpx;
								color: #E60012
							}
						}
					}

					.bottom {
						display: flex;
						align-items: center;

						image {
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-right: 17rpx;
						}

						.name,
						.courseName {
							font-size: 24rpx;
							color: #1E1E1E;
						}

						.line {
							margin: 0 10rpx;
							height: 24rpx;
							width: 2rpx;
							background: #000;
						}
					}
				}
			}
		}
	}
</style>
